<template>
	<view v-if="!pageLoading">
		<view class="uni-margin-wrap" v-if="adList.length>0">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="10000" :duration="500">
				<swiper-item v-for="(item,index) in adList[0].phList" :key="index">
					<view class="swiper-item uni-bg-red">
						<image style="width: 750rpx; height: 300rpx; background-color: #eeeeee; border-radius: 12px;"
							:src="http.BASE_URL+'/upload'+item.photoUrl" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view>
			<uni-notice-bar show-icon scrollable :speed="20" showGetMore=true @getmore="getmore" :text="messageList" />
		</view>
		<view>
			<uni-card title="">
				<template v-slot:title>
					<uni-list>
						<uni-list-item title="驾驶仓" clickable rightText="编辑"
							@click="showDrawer('showRight')"></uni-list-item>
					</uni-list>
				</template>
				<uni-grid :column="4" :show-border="false" :square="false">
					<uni-grid-item v-for="(item ,index) in listDriver" :index="index" :key="index">
						<view class="grid-item-box">
							<text class="grid-item uni-radius uni-pa-2 uni-ma-1"
								@click="goPage(item.handphoneUrl)">{{item.text}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
				<view>
					<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
						<view class="scroll-view">
							<scroll-view class="scroll-view-box" scroll-y="true">
								<view class="myflex">
									<button type="primary" size="mini" @click="saveMenu('showRight')">确认</button>
									<button type="warn" size="mini" @click="closeDrawer('showRight')">关闭</button>
								</view>
								<view class="info-content">
									<DaTree ref="DaTreeRef" :data="roomTreeData" labelField="name" valueField="id"
										defaultExpandAll showCheckbox :defaultCheckedKeys="defaultCheckedKeysValue"
										@change="handleTreeChange" @expand="handleExpandChange"></DaTree>
								</view>
							</scroll-view>
						</view>
					</uni-drawer>
				</view>
			</uni-card>
		</view>
		<view>
			<uni-card title="集团组织架构">
				<view class="grid-item-title">
					<view v-for="(item ,index) in plist" :index="index" :key="index" @click="resetframe(item,index)">
						<uni-badge class="uni-badge-left-margin" :text="item.badge" absolute="rightTop"
							:offset="[-1, -1]" size="small">
							<view :class="index==cindex?'grid-item':'grid-itemgray'"><text
									class="uni-pa-2 uni-ma-1">{{item.text}}</text></view>
						</uni-badge>
					</view>
				</view>
				<view class="grid-item-box">
					<view v-for="(item ,index) in list" :index="index" :key="index" class="uni-mb-10 uni-ml-5"
						@click="resetframe(item)">
						<uni-badge class="uni-badge-left-margin" :text="item.badge" absolute="rightTop"
							:offset="[-1, -1]" size="small">
							<view><text class="grid-item2 uni-pa-2 uni-ma-1">{{item.text}}</text></view>
						</uni-badge>
					</view>
				</view>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item" @click="actionsClick('up')" v-if="upDepart.length>0">
						<uni-icons type="arrow-up" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">返回上级</text>
					</view>
					<view class="card-actions-item" @click="actionsClick('top')">
						<uni-icons type="arrow-up" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">返回顶级</text>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="uni-mb-10">
			<uni-card title="计划查看">
				<view>
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
						styleType="button" activeColor="#007aff"></uni-segmented-control>
					<view class="content">
						<view v-show="current === 0">
							<PersonalPlan :defaultDepart="cDepart"></PersonalPlan>
						</view>
						<view v-show="current === 1">
							<ProjectPlan></ProjectPlan>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
	<MyLoading :loading="pageLoading"></MyLoading>
</template>
<script>
	import MyLoading from "@/components/my-loading/my-loading"
	import DaTree from '@/components/da-tree/index.vue'
	import PersonalPlan from "./components/personal-plan/personal-plan.vue"
	import ProjectPlan from "./components/project-plan/project-plan.vue"
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app";
	import {
		defineComponent,
		reactive,
		ref
	} from 'vue';
	import http from "@/utils/http";
	/**
	 * 模拟创建一个接口数据
	 */
	export default defineComponent({
		components: {
			DaTree,
			PersonalPlan,
			ProjectPlan,
			MyLoading
		},
		setup(props, context) {
			//生命周期onload方法
			onLoad(() => {

			})
			onShow(() => {
				http.get("/menu/hpinit").then((res) => {
					if (res && res.data && res.data.code == 1) {
						const menulist = res.data.data;
						const newmenu = JSON.parse(JSON.stringify(menulist).replace(/text/g,
							'name'));
						const newmenu2 = JSON.parse(JSON.stringify(newmenu).replace(/menus/g,
							'children'));
						roomTreeData.value = newmenu2;
						return initMenu();
					}
				}).then((res) => {
					if (res && res.data && res.data.code == 1) {
						const mlist = res.data.data;
						const ms = mlist.map((item) => {
							return item.id;
						})
						listDriver.value = mlist;
						defaultCheckedKeysValue.value = ms;
						setTimeout(() => {
							pageLoading.value = false;
						}, 2000)
					}
				});
				initOther();
				initAd();
			})

			const pageLoading = ref(true);
			const DaTreeRef = ref()
			// key的类型必须对应树数据key的类型
			const defaultCheckedKeysValue = ref()
			const allsubmitkeys = ref()
			const roomTreeData = ref();
			const items = ref(['个人计划', '项目计划'])
			const current = ref(0)
			const showRight = ref(false)
			const listDriver = ref();
			const messageList = ref();
			const myDepart = ref(); //所有部门
			const sumUsers = ref();
			const plist = ref(); //主部门plist
			const list = ref(); //子部门list
			const cDepart = ref(); //当前部门
			const cindex = ref() //当前索引
			const upDepart = ref([]);
			const adList = reactive([]);
			//去哪个页面
			function goPage(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			}

			function getmore() {
				console.log(9)
			}
			//返回上级方法
			function actionsClick(type) {
				if ('up' == type) {
					let up = upDepart.value.pop();
					setList(up, 0);
				} else if ('top' == type) {
					setList(myDepart.value, 0);
				}
			}
			//设置显示结构图方法
			function setList(mp, index) {
				cindex.value = index;
				cDepart.value = mp;
				let pl = cDepart.value;
				plist.value = pl.map((item) => {
					let v = {};
					v.id = item.id;
					v.text = item.name;
					let userList = sumUsers.value;
					let ii = userList.find(it => it.id == item.id);
					v.badge = ii ? (ii.curTotal ? ii.curTotal : "0") : "0";
					return v;
				});

				let currentList = cDepart.value[index].children;
				list.value = currentList.map((item) => {
					let v = {};
					v.id = item.id;
					v.text = item.name;
					let userList = sumUsers.value;
					let ii = userList.find(it => it.id == item.id);
					v.badge = ii ? (ii.curTotal ? ii.curTotal : "0") : "0";
					return v;
				})
			}
			// 刷组织架构
			function resetframe(item, index) {
				let arr = [];
				//进栈
				upDepart.value.push(cDepart.value);
				let list0 = cDepart.value.find((nn) => {
					if (item.id == nn.id) {
						return nn;
					}
				});
				if (!list0) {
					for (let i = 0; i < cDepart.value.length; i++) {
						let find = false;
						let it = cDepart.value[i];
						for (let j = 0; j < it.children.length; j++) {
							if (it.children[j].id == item.id) {
								list0 = it.children[j];
								find = true;
								break;
							}
						}
						if (find == true) {
							break;
						}
					}
				}
				arr.push(list0);
				setList(arr, 0);
			}
			// 初始页面其它信息
			function initOther() {
				http.post("/notice/getNoticeByDepartId", {
					departId: "a3312rraq1",
					page: 1,
					size: 5
				}).then((res) => {
					if (res && res.data && res.data.code == 1) {
						const mlist = res.data.data;
						const ms = mlist.map((item) => {
							return "[" + item.title + "-" + item.createTime + "]";
						})
						console.log(ms)
						messageList.value = ms.join("        ");
					}
				});
				http.post("/depart/indexDepart").then((res) => {
					if (res && res.data && res.data.code == 1) {
						const m = res.data.myDepart;
						myDepart.value = m;
					}
				}).then((res2) => {
					http.post("/depart/sumUsers", {
						type: 1
					}).then((res) => {
						if (res && res.data && res.data.code == 1) {
							const m = res.data.data;
							sumUsers.value = m;
							setList(myDepart.value, 0);
						}
					});
				});
			}
			// 初始化菜单与驾驶仓
			function initMenu() {
				return http.get("/menu/hphasmenu");
			}
			// 初始化广告
			function initAd() {
				http.get("/zrhandphonephoto/table", {
					page: 1,
					szie: 3
				}).then((res) => {
					if (res && res.data && res.data.code == 1) {
						adList.splice(0, adList.length);
						adList.push(...res.data.rows);
					}
				});
			}

			function onClickItem(e) {
				if (current.value != e.currentIndex) {
					current.value = e.currentIndex;
				}
			}
			// 打开窗口
			function showDrawer(e) {
				this.$refs[e].open()
			}
			// 关闭窗口
			function closeDrawer(e) {
				this.$refs[e].close()
			}
			// 保存
			function saveMenu(e) {
				http.post("/menu/hpsavemenu", {
					id: allsubmitkeys.value.join(",")
				}).then((res) => {
					if (res && res.data && res.data.code == 1) {
						uni.showToast({
							title: '保存成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 3000
						})
						return initMenu();
					}
				}).then((res) => {
					if (res && res.data && res.data.code == 1) {
						const mlist = res.data.data;
						const ms = mlist.map((item) => {
							return item.id;
						})
						listDriver.value = mlist;
						defaultCheckedKeysValue.value = ms;
						setTimeout(() => {
							pageLoading.value = false;
						}, 2000)
					}
				});
			}
			// 抽屉状态发生变化触发
			function change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}

			function onNavigationBarButtonTap(e) {
				if (this.showLeft) {
					this.$refs.showLeft.close()
				} else {
					this.$refs.showLeft.open()
				}
			}
			// app端拦截返回事件 ，仅app端生效
			function onBackPress() {
				if (this.showRight || this.showLeft) {
					this.$refs.showLeft.close()
					this.$refs.showRight.close()
					return true
				}
			}

			function doExpandTree(keys, expand) {
				DaTreeRef.value?.setExpandedKeys(keys, expand)
				const gek = DaTreeRef.value?.getExpandedKeys()
				console.log('当前已展开的KEY ==>', gek)
			}

			function doCheckedTree(keys, checked) {
				DaTreeRef.value?.setCheckedKeys(keys, checked)

				const gek = DaTreeRef.value?.getCheckedKeys()
				console.log('当前已选中的KEY ==>', gek)
			}

			function handleTreeChange(allSelectedKeys, currentItem) {
				allsubmitkeys.value = allSelectedKeys;
				console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
			}

			function handleExpandChange(expand, currentItem) {
				console.log('handleExpandChange ==>', expand, currentItem)
			}
			return {
				DaTreeRef,
				roomTreeData,
				defaultCheckedKeysValue,
				handleTreeChange,
				handleExpandChange,
				doExpandTree,
				doCheckedTree,
				showDrawer,
				onClickItem,
				closeDrawer,
				change,
				items,
				list,
				current,
				saveMenu,
				listDriver,
				messageList,
				getmore,
				plist,
				cindex,
				resetframe,
				actionsClick,
				upDepart,
				cDepart,
				goPage,
				adList,
				http,
				pageLoading
			}
		},
	})
</script>
<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.myflex {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 5px;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.grid-item-title {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;

		.grid-item {
			background-color: $uni-primary;
			color: #FFFFFF;
			padding: 5px;
			font-size: 1.2em;
			font-weight: 600;
			white-space: nowrap;
		}

		.grid-itemgray {
			background-color: $uni-info;
			color: #FFFFFF;
			padding: 5px;
			font-size: 1.2em;
			font-weight: 600;
			white-space: nowrap;
		}
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 10px 0;

		.grid-item {
			background-color: $uni-primary;
			color: #FFFFFF;
			padding-right: 5px;
			padding-left: 5px;
			white-space: nowrap;
		}

		.grid-item2 {
			background-color: rgb(236, 150, 51);
			color: #FFFFFF;
			padding: 8px;
			white-space: nowrap;
		}
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.my-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.dark_deep {
		background-color: rgb(64, 158, 255);
	}

	.my-uni-row {
		margin-bottom: 10px;
		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
</style>